<template>
  <Layout>
    <Header style="width: 100%; margin-top: -2%">
      <MyHeader />
    </Header>
    <Content>
      <div class="grid-content-url bg-purple">
        <el-row :gutter="0" style="height: 6%">
          <div style="padding-top: 15px">
            <!-- <div style="display:block;margin-bottom:40px;">
                  <span class="urlStyle">流媒体地址：</span>
                  <el-upload
                    style="display:inline;"
                    action="#"
                    ref="upload"
                    accept=".txt"
                    :show-file-list="false"
                    :http-request="uploadFa"
                  >
                    <el-button slot="trigger" class="fileStyle"
                      >选取文件</el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                  </el-upload>
                </div> -->

            <div style="display: inline">
              <span class="urlStyle_changshang">选择厂商：</span>
              <el-select
                v-model="deviceUserNow"
                @change="selectUser(deviceUserNow)"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="item in deviceUsersList"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>
            <div style="display: inline; float: right; padding-right: 75px">
              <el-button
                style="margin: -11px"
                :type="active === 'hand' ? 'primary' : ''"
                @click.native="handPageChange()"
                >手动换页</el-button
              >
              <el-button
                :type="active === 'auto' ? 'primary' : ''"
                @click.native="autoPageChange()"
                >自动轮播</el-button
              >
              <span v-if="active === 'auto'" class="urlStyle_changshang"
                >时间间隔：</span
              >
              <el-select
                v-if="active === 'auto'"
                v-model="autoIntervalNow"
                @change="selectAutoInterval(autoIntervalNow)"
                style="width: 100px"
              >
                <el-option
                  v-for="item in autoIntervalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </el-row>
        <el-row :gutter="0" style="height: 87%">
          <el-col :span="24">
            <div style="height: 100%">
              <flv-video-player ref="flvPlayer"></flv-video-player>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <div>
            <el-pagination
              :current-page.sync="currentpage"
              :page-size="pagesize"
              layout="prev, pager, next"
              :total="this.itemTotalNumber"
              @current-change="handleCurrentChange"
              @submit.native.prevent
            >
            </el-pagination>
          </div>
        </el-row>
      </div>
    </Content>
  </Layout>
</template>

<script>
import MyHeader from "./Header.vue";
import FlvVideoPlayer from "./videoRTMP/flvVideoPlayer";

import { mapState, mapActions } from "vuex";

export default {
  components: {
    MyHeader,
    FlvVideoPlayer,
  },
  data() {
    return {
      input: "",
      stuname: "重新测试",
      srcList: [], //文件中所有src
      items: [],
      pagesize: 6,
      total: this.$store.state.itemTotalNumber,
      // total: 3,
      page_count: 0,
      currentpage: 1,
      // deviceUsersOptions: deviceUsersList,
      deviceUserNow: "",
      autoIntervalNow: 8000, //自动轮播翻页时间间隔设置
      autoIntervalList: [
        {
          value: 5000,
          label: "5s",
        },
        {
          value: 8000,
          label: "8s",
        },
        {
          value: 10000,
          label: "10s",
        },
        {
          value: 15000,
          label: "15s",
        },
        {
          value: 20000,
          label: "20s",
        },
        {
          value: 30000,
          label: "30s",
        },
        {
          value: 40000,
          label: "40s",
        },
        {
          value: 50000,
          label: "50s",
        },
        {
          value: 60000,
          label: "60s",
        },
      ],

      timer: "", //定时器
      active: "hand",
    };
  },
  mounted() {
    this.getDeviUsers();

    // this.crePlayer();
  },
  computed: {
    ...mapState([
      "deviceUsersList",
      "nowCamerNums",
      "streamsList",
      "playStreamUrlList",
      "itemTotalNumber",
    ]),
  },
  methods: {
    ...mapActions([
      "getDeviceUsers",
      "getUserPlayCamerNums",
      "getOnlineStreamId",
      "getStreamUrlById",
    ]),
    getDeviUsers() {
      this.getDeviceUsers();
    },

    selectAutoInterval(val) {
      clearInterval(this.timer);
      console.log("清除定时器timer:", this.timer);
      this.autoPageChange();
    },

    selectUser(val) {
      let sendParams1 = {
        username: val,
      };
      for (let key in this.playStreamUrlList) {
        delete this.playStreamUrlList[key];
      }

      this.getUserPlayCamerNums(sendParams1)
        .then(() => {
          if (this.nowCamerNums == "") {
            this.$refs.flvPlayer.flv_destroyAll();
            return new Promise(() => {});
          } else {
            let allStreamNames = this.nowCamerNums.join(","); //使用逗号分隔多个camerNums
            let sendParams2 = {
              streamNames: allStreamNames,
            };
            this.getOnlineStreamId(sendParams2);
          }
        })
        .catch((err) => {
          console.log("[catch]", err);
        })
        .then(() => {
          this.sleep(1200).then(() => {
            for (var i in this.streamsList) {
              if (this.streamsList[i].online == true) {
                let sendParams3 = {
                  streamId: this.streamsList[i].id,
                  protocol: "flv",
                };
                this.getStreamUrlById(sendParams3);
              }
            }
          });
        })
        .then(() => {
          this.sleep(2500).then(() => {
            this.$refs.flvPlayer.crePlayer(0);
          });
        }); //获取camerNums列表
    },

    sleep(time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    },

    uploadFa(item) {
      this.readFile(item.file);
      // 处理文件上传
    },
    readFile(file) {
      // console.info(file.name);
      const reader = new FileReader();
      reader.onload = (e) => this.$emit("load", this.dealNum(e.target.result));
      reader.readAsBinaryString(file);
    },
    dealNum(item) {
      // 将item展示到需要地方
      // console.log(item);
      this.srcList = item.split("\n");

      // this.srcList.push(item);

      // console.log("this.srcList", this.srcList);
      this.initPage(0);
      // this.crePlayer();
    },
    // beforeExcelUpload(file) {
    //   const isLt200K = file.size / 1024 < 200;
    //   if (!isLt200K) {
    //     this.$message.error("上传文件大小不能超过 200k!");
    //   }
    //   return isLt200K;
    // },

    initPage: function (val) {
      // var thispage = this;
      var interval = this.pagesize; //每页设置播放视频个数

      this.streamUrls = [];
      this.players = [];
      for (var m = 1; m <= interval; m++) {
        //取该页中的流地址
        // var itemlist = {
        //   id: val * interval + m,
        //   url: this.srcList[val * interval + m - 1]
        // };
        var itemlist = this.srcList[val * interval + m - 1];
        var playerString = "player" + m;
        if (val * interval + m <= this.total) {
          this.streamUrls.push(itemlist); //初始化该页流内容
          // console.log("this.streamUrls:", this.streamUrls);
          // console.log("playerString:", playerString);
          this.players.push(playerString); //初始化players控件个数
          // console.log("this.players:", this.players);
        }
      }
    },

    handleCurrentChange(val) {
      // var thispage = this;
      this.currentpage = val;
      console.log("currentpage:", this.currentpage);
      // this.initPage(val - 1);
      // this.crePlayer();
      this.$refs.flvPlayer.crePlayer(val - 1);
    },

    autoPageChange() {
      console.log("开启自动翻页功能");
      console.log("选择的时间间隔：", this.autoIntervalNow);
      this.active = "auto";
      this.page_count = Math.ceil(this.total / this.pagesize); //计算总页数
      //每隔指定秒数进行翻页
      this.timer = setInterval(() => {
        setTimeout(this.changePageSize(), 0);
        console.log("定时器timer被触发---", this.timer);
      }, this.autoIntervalNow);
      console.log("开启定时器timer:", this.timer);
    },
    changePageSize() {
      if (this.currentpage + 1 <= this.page_count) {
        this.handleCurrentChange(this.currentpage + 1);
      } else {
        this.handleCurrentChange(1);
      }
    },

    handPageChange() {
      this.active = "hand";
      //清除定时器
      clearInterval(this.timer);
      console.log("清除定时器");
    },
  },
};
</script>

<style>
.urlStyle_changshang {
  font-size: 23px;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
  /* float: left; */
  line-height: 40px;
  padding: 0 12px 0 30px !important;
  box-sizing: border-box;
  color: #0d285d;
  margin-left: 22px;
}
.el-button--primary {
  background-color: #5aabff !important;
}
legend {
  font-weight: 800;
  font-size: 19px !important;
}
.el-message {
  font-size: 25px !important;
}
.el-message__content {
  font-size: 18px !important;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  /* background: #d3dce6; */
  background: rgba(211, 220, 230, 0.8);
}

.grid-content-url {
  /* height: auto !important; */
  height: 88% !important;
  min-height: 88% !important;
  border-radius: 4px;
  min-height: 36px;
  margin-top: 5px;
  margin-left: 20px;
  margin-right: 20px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-input--suffix {
  /* width: 500px !important; */
}
.el-select-dropdown__item {
  font-size: 20px !important;
}
.el-form-item__label {
  color: #0d285d !important;
  font-size: 20px !important;
}
.el-input__inner {
  font-size: 20px !important;
}
.el-button {
  color: #0d285d !important;
  font-weight: bold !important;
  font-size: 19px !important;
}
.el-row {
  margin-bottom: 0px;
}
.el-card__body {
  padding: 5px !important;
}
.el-card__header {
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}
/* 修改placeholder字体颜色 */
input::-webkit-input-placeholder {
  /*WebKit browsers*/
  color: rgb(128, 123, 123) !important;
}

input::-moz-input-placeholder {
  /*Mozilla Firefox*/
  color: rgb(128, 123, 123) !important;
}

input::-ms-input-placeholder {
  /*Internet Explorer*/
  color: rgb(128, 123, 123) !important;
}
.vid {
  /* background-size: 200% 200%;
  width: 100%;
  margin: 105px auto 15px 0px; */
  /* margin: 0 auto; */
}
.monitor-card {
  width: 100%;
  /* width: 50%; */
  /* height: 1600px; */
  height: 100%;
  /* margin-left: 20px; */
  margin-top: 20px;
}
.monitor-card .ivu-card-head {
  padding: 4px 5px;
  border-bottom: 1px solid #13a4c2;
  background-color: #13a4c2 !important;
  height: 35px;
}
.monitor-card .ivu-card-head p {
  font-size: 2.2rem;
  height: 35px;
  line-height: 30px;
  color: #fff;
  text-align: left;
}
.monitor-card .ivu-card-body {
  padding: 1px;
  background-color: #13a4c2;
}
.monitor-card .ivu-card-body p {
  height: 35px;
  line-height: 30px;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.8);
}
.el-pagination {
  margin-left: 40px !important;
}
.number {
  font-size: 20px !important;
  color: #0d285d;
  background: rgba(0, 0, 0, 0) !important;
}
.el-pager li.active {
  color: rgb(255, 255, 255) !important;
}

.btn-next {
  font-size: 20px !important;
  color: #0d285d;
  background: rgba(0, 0, 0, 0) !important;
}
.btn-prev {
  font-size: 20px !important;
  color: #0d285d;
  background: rgba(0, 0, 0, 0) !important;
}
.el-icon-more {
  font-size: 20px !important;
  color: #0d285d;
  background: rgba(0, 0, 0, 0) !important;
}
.btn-quicknext {
  font-size: 20px !important;
  color: #0d285d;
  background: rgba(0, 0, 0, 0) !important;
}

.centeredVideo {
  display: block;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}
</style>
